<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花卉预约</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>

    <div class="web">
        <div class="first-page">
            <div>
                姓名:<input type="text">
            </div>
            <div>
                手机:<input type="text">
            </div>
            <div>
                身份证:<input type="text">
            </div>
            <button>预约记录</button>
            <button id="start">开始预约</button>
        </div>
        <div class="second-page">
            <h1>预约场次</h1>
            <div>
                日期
                <select name="" id="" class="slt">
                    <option value="" selected></option>
                </select>
            </div>
            <ul class="list">
                <li>
                    <span>日期</span>
                    <button>预约</button>
                </li>
                <li>
                    <span>日期</span>
                    <button>预约</button>
                </li>
                <li>
                    <span>日期</span>
                    <button>预约</button>
                </li>
            </ul>
            <div class="tip">
                预约成功!
            </div>
        </div>
    </div>
    <script src="./ajax.js"></script>
    <script>
        let api = {
            register: 'http://shopback.bluej.cn/api/f_user/register',
            chooselist: "http://shopback.bluej.cn/api/f_user/chooselist",
            chooseday: "http://shopback.bluej.cn/api/f_user/chooseday",
            bookday: "http://shopback.bluej.cn/api/f_user/bookday"
        }
        let start = document.querySelector("#start");
        let firstP = document.querySelector(".first-page");
        let secondP = document.querySelector(".second-page");
        let chooseLits = document.querySelector(".second-page .list")
        let slt_box = document.querySelector(".second-page .slt");
        slt_box.addEventListener("change", function () {
            console.log("下拉框值改变", this.value)
            renderList(this.value);
        })
        function renderSelect(data) {

            let html = ``;
            data.forEach((el, idx) => {
                let state = '';
                if (idx == 0) {
                    state = 'selected'
                }
                // 注意. 要把 值 放在value, 否则 change 事件内获取不到
                html += `<option value="${el.day_time}" ${state}>${el.day_time}</option><li>
                   `
            })
            slt_box.innerHTML = html;
            // 渲染第一天的场次详情
            renderList(data[0].day_time)
        }
        async function renderList(day_time) {
            let day_detail = await ajax({
                url: api.chooseday,
                params: {
                    token: localStorage.getItem("token"),
                    // 简写属性
                    day_time
                }
            })
            let html = ``;
            day_detail.result.list.forEach((el, idx) => {
                html += `<li>
                    <span>${el.show_name}</span>
                    <button class="secondBtn" data-date=${el.day_time} data-showid=${el.show_id}>预约</button>
                </li>`
            })
            chooseLits.innerHTML = html;
        }
        // 使用事件代理添加预约按钮功能
        chooseLits.addEventListener("click", async (event) => {
            // console.log("触发事件的元素", event.target);
            // console.log("添加事件的元素", event.currentTarget);
            // 根据元素是否拥有指定类名判断是否为触发事件的目标元素
            // console.log(event.target.classList.contains("secondBtn"))
            let isbtn = event.target.classList.contains("secondBtn");
            let tip = document.querySelector(".second-page .tip")
            if (isbtn) {
                console.log(event.target.dataset.date)
                let { date, showid } = event.target.dataset;
                let res = await ajax({
                    url: api.bookday,
                    method: "POST",
                    params: {
                        token: localStorage.getItem("token"),
                        // 简写属性
                        day_time: date,
                        show_id: showid
                    }
                })
                tip.classList.add("tip-active");
                setTimeout(() => {
                    tip.classList.remove("tip-active")
                }, 2000)
                console.log("预约结果", res);
            }
        })
        start.addEventListener("click", async () => {
            // 假装验证通过
            if (1) {
                let register = await ajax({
                    url: api.register,
                    method: "POST",
                    params: {
                        name: "老李",
                        phone: "13612345688",
                        card: "440583199802111878"
                    }
                })
                let token = register.result.token;
                // 将 token 存至 storage 供后续使用
                localStorage.setItem("token", token);
                // 跳转至第二个页面并请求可预约场次
                firstP.style.display = "none";
                secondP.style.display = "flex";
                let listData = await ajax({
                    url: api.chooselist,
                    params: {
                        token: token
                    }
                })
                console.log("可预约列表", listData)
                renderSelect(listData.result.list)
            }
        })
    </script>
</body>

</html>